<style scoped>
    .content{
        padding:20px;
    }
    
    .terminal{
        padding:20px;
    }
</style>
<div class="content" id="home" v-cloak>
    
    <div>textarea 修改文件内容</div>
    <div id="result" style="display:none;"><%=data.result %></div>
    <textarea class="text_comm_tarea mt10" v-model="textarea"></textarea>
    <el-button class="mt20" @click="update" type="primary">修改</el-button>

    <div>textarea 新增文件</div>
    <div id="result" style="display:none;"></div>
    <div> <span>文件名称</span> <input type="text" v-model.trim="filename" placeholder="请填写需要新增文件的名称"></div>
    <textarea class="text_comm_tarea mt10" v-model="textarea_1"></textarea>
    <el-button class="mt20" @click="add" type="primary">新增</el-button>

    <div class="mb20"></div>
    <div>xterm框效果</div>
    <div class="mt10" id="terminal"></div>

</div>
<script>
new Vue({
    el: '#home',
    data: function () {
        return {
            name:'zane',
            textarea: '',
            textarea_1:'',
            filename:'',
        }
    },
    filters: {
    },
    mounted() {
        this.textarea = $('#result').text()

        var term = new Terminal();
        term.open(document.getElementById('terminal'));
        
        function runFakeTerminal() {
            if (term._initialized) {
                return;
            }

            term._initialized = true;

            term.prompt = () => {
                term.write('\r\n$ ');
            };

            term.prompt();

            term.on('key', function (key, ev) {
                const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;

                if (ev.keyCode === 13) {
                    term.prompt();
                } else if (ev.keyCode === 8) {
                    if (term._core.buffer.x > 2) {
                        term.write('\b \b');
                    }
                } else if (printable) {
                    term.write(key);
                }
            });

            term.on('paste', function (data) {
                term.write(data);
            });
        }
        runFakeTerminal();
    },
    methods: {
        update(){
            util.ajax({
                url:`${config.baseApi}api/v1/files/updatefile`,
                data:{
                    content: this.textarea,
                },
                success:data=>{

                }
            })
        },
        add(){
            util.ajax({
                url: `${config.baseApi}api/v1/files/addfile`,
                data: {
                    filename:this.filename,
                    content: this.textarea_1,
                    remotePath:'/data/down',
                },
                success: data => {

                }
            })
        },
    }    
})
</script>